<template>
	<view class="container">
		<searchbar clearButton="auto" confirm="onSearch"></searchbar>

		<view class="head">
			<text>分类索引</text>
		</view>
		<view class="btn-area">
			<block v-for="item,index in xueduan" :key="index">
				<navigator :url="'./category?grd='+index">
					<button type="default">
						<image :src="'/static/image/cloudclasses/'+(index+1)+'.png'"></image>
						<view>{{item}}</view>
					</button>
				</navigator>
			</block>
		</view>
		<showlist title="最近在学" more="near" :list='courseList'>

		</showlist>
	</view>
</template>

<script>
	import showlist from '../../components/course-video/show-list.vue'
	import searchbar from '../../components/uni-search-bar/uni-search-bar.vue'
	
	
	export default {
		components:{
			showlist,
			searchbar
		},
		data() {
			return {
				xueduan: [
					"小学",
					"初中",
					"高中",
				],
				courseList: [
					{id:'231',title:'123',desc:'2435',content:'dfasdfadsfasdf454fasdf454'},
					{id:'231',title:'123',desc:'2435',content:'dfasdfadsfasdf454fasdf454'}
				]
			}
		},
		onLoad() {

		},
		methods: {

		},
		
	}
</script>

<style>
	.container {
		width: 100%;
		height: 100vh;
	}

	.btn-area {
		text-align: center;
		padding: 10rpx;
		margin: 10rpx 0;
	}

	.btn-area navigator {
		width: 200rpx;
		display: inline-block;
		margin: 10rpx;
	}

	.btn-area image {
		margin-top: 20rpx;
		height: 100rpx;
		width: 100rpx
	}

	.btn-area button {
		padding: 20rpx auto;
		font-size: 30rpx;
	}

	.head {
		padding-top: 20rpx;
		position: relative;
		text-align: center;
		font-size: 50rpx;
	}

	.head button {
		display: inline;
		position: absolute;
		right: 30rpx;
		bottom: 0;
	}

	.head-img {
		width: 100%;
		height: 180rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>
